<template>
  <div class="game-view-page">
    <img src="./image/game-view-image.jpg" alt="" @click="actionClickOpen">
    <h1 @click="actionClickClose">我脑厉害了啦</h1>
    <div class="start-game" @click="actionClickCatalogue">
      进入游戏
    </div>
    <div class="music-content">
      <audio id="music1" :src="musicAudio" controls="controls" loop="loop">
      </audio>
    </div>
  </div>
</template>
<script>
  export default {
    name:'',
    data(){
      return {
        catalogueList:['0.玩法介绍', '1.食品', '2.动物', '3.植物', '4.生活用品'],
        musicAudio:'https://i-shopping-beta.oss-cn-shanghai.aliyuncs.com/image/start.mp3'
      }
    },
    methods:{
      actionClickCatalogue(){
        this.$router.push({name:'CatalogueViewPage'});
      },
      actionClickClose(){
        var audio = document.getElementById('music1');
        audio.pause();
      },
      actionClickOpen(){
        var audio = document.getElementById('music1');
        audio.play();
      }
    },
    mounted(){
      window.sessionStorage.setItem('catalogueList', JSON.stringify(this.catalogueList));
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .game-view-page{
    text-align: center;
    img{
      width:100%;
      height:100%;
      position: fixed;
      top:0;left:0;
      z-index:1;
    }
    h1{
      width:700px;
      height:500px;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      margin:auto;
      font-size:100px;
      color:$color-4;
      z-index:2;
    }
    .start-game{
      width:300px;
      height:100px;
      position: fixed;
      top:100px;left:0;right:0;bottom:0;
      margin:auto;
      font-size:50px;
      color:$color-4;
      cursor: pointer;
      z-index:2;
      background:#02abfa;
      line-height:100px;
      border-radius: 50px;
    }
  }
  .music-content{
    position: fixed;
    top:0;left:0;
    z-index:10000;
    color:$color-4;
    font-size:30px;
    opacity: 0;
  }
</style>
